<template>
  <el-container>

    <el-main>
      <el-row>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="weekStatisticsId" style="width: 600px;height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="statusStatisticsId" style="width: 600px;height:400px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="monthStatisticsId" style="width: 600px;height:400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="yearStatisticsId" style="width: 600px;height:400px;"></div>
          </el-card>
        </el-col>
      </el-row>

    </el-main>

  </el-container>
</template>

<script>
import * as echarts from "echarts";
import { weekStatistics, statusStatistics, monthStatistics, yearStatistics } from "@/api/user/statistics";
export default {
  data() {
    return {
      queryParams: {
      },
    };
  },
  mounted() {
    // 引入 周内待办统计 主模块
    var weekChart = echarts.init(document.getElementById('weekStatisticsId'));
    // 请求数据
    weekStatistics(this.queryParams).then(response => {
      // 处理数据
      let _data = JSON.parse(response.data)
      _data.title = { text: '本周内创建的待办' }
      // 绘制图表
      weekChart.setOption(_data);
    });
    // 引入 待办状态统计 主模块
    var statusChart = echarts.init(document.getElementById('statusStatisticsId'));
    // 请求数据
    statusStatistics(this.queryParams).then(response => {
      // 处理数据
      let _data = JSON.parse(response.data)
      // 绘制图表
      statusChart.setOption(_data);
    });

    var monthChart = echarts.init(document.getElementById('monthStatisticsId'));

    // 月待办统计
    monthStatistics(this.queryParams).then(response => {
      // 处理数据
      let _data = JSON.parse(response.data)

      _data.title = { text: '月待办统计' }
      // 绘制图表
      monthChart.setOption(_data);
    });

    var yearChart = echarts.init(document.getElementById('yearStatisticsId'));
    // 请求数据
    yearStatistics(this.queryParams).then(response => {
      // 处理数据
      let _data = JSON.parse(response.data)
      _data.title = { text: '年待办统计' }
      // 绘制图表
      yearChart.setOption(_data);
    });



  }
};
</script>

<style>
.box-card {
  margin: 30px 50px;
}
</style>
